<template>
  <view class="generate-quantity">
    <wd-card title="生成数量">
      <view class="flex gap-3">
        <view
          v-for="item in numTabs"
          :key="item"
          class="tab-item"
          :class="item === batchSize ? 'item_active' : ''"
          @tap="onChangeTab(item)"
        >
          {{ item }}
        </view>
      </view>
    </wd-card>
  </view>
</template>
<script lang="ts" setup>
import { useWorkflowStore } from "@/store/index";
import { storeToRefs } from "pinia";

const { batchSize } = storeToRefs(useWorkflowStore());
const numTabs = [1, 2];

const onChangeTab = (item: number) => {
  batchSize.value = item;
};
</script>
<script lang="ts">
// 取消小程序样式隔离
export default {
  options: { styleIsolation: "shared" },
};
</script>
<style lang="scss" scoped>
.generate-quantity {
  position: relative;

  .tab-item {
    position: relative;
    display: flex;
    gap: 16rpx;
    padding: 8rpx 48rpx;
    font-size: 28rpx;
    color: #333333;
    border: 2rpx dashed rgba(51, 51, 51, 0.7);
    border-radius: 4rpx;
    transition: all 0.2s linear;
  }

  .item_active {
    color: #c13432;
    background: #f3d6d6;
    border: 2rpx solid #c13432;
  }
  :deep(.wd-card) {
    padding-bottom: 24rpx;
  }
}
</style>
